<template>
  <div class="container">
    <!-- 搜索和排序 -->
    <div class="controls">
      <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索景点..."
          class="search-input"
      >
      <select v-model="sortBy" class="sort-select">
        <option value="rating">按评分排序</option>
        <option value="price">按价格排序</option>
        <option value="name">按名称排序</option>
      </select>
    </div>

    <!-- 景点列表 -->
    <div class="attractions-grid">
      <div
          v-for="attraction in sortedAttractions"
          :key="attraction.id"
          class="attraction-card"
      >
        <img
            :src="attraction.image"
            :alt="attraction.name"
            class="attraction-image"
        >
        <div class="attraction-info">
          <h3>{{ attraction.name }}</h3>
          <p class="description">{{ attraction.description }}</p>
          <div class="details">
            <span class="rating">⭐ {{ attraction.rating }}</span>
            <span class="price">￥{{ attraction.price }} 起</span>
            <span class="hours">🕒 {{ attraction.openingHours }}</span>
          </div>
          <!-- 导航按钮 -->
          <button @click="navigateTo(attraction)" class="nav-button">导航</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 景点数据
const attractions = ref([
  {
    id: 1,
    name: '晋祠博物馆',
    description: '晋国宗祠园林建筑群',
    rating: 4.8,
    price: 60,
    openingHours: '08:30 - 17:00',
    image:' https://img1.qunarzz.com/p/tts4/1801/51/8b4e7ffc88790902.jpg_r_720x480x95_6015fbfa.jpg',
    location: 'https://ditu.amap.com/search?id=B015F0IFI3&city=140110&geoobj=112.556118%7C37.791799%7C112.571482%7C37.798514&query_type=IDQ&query=%E6%99%8B%E7%A5%A0%E5%8D%9A%E7%89%A9%E9%A6%86&zoom=17'
  },
  {
    id: 2,
    name: '山西博物院',
    description: '荟萃了山西文物的精华"',
    rating: 4.7,
    price: 40,
    openingHours: '06:30 - 19:30',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.b3c7c10c9b9185d078757d93615204a8?rik=oma%2fNplfxe4EBw&riu=http%3a%2f%2fpic.yupoo.com%2ffotomag%2fef4ebc37%2fb66e48ba.jpg&ehk=wSwK1R7Mj%2bMbbTo%2fSHdzdi2KLWo%2bB2Sc393NfomHgDo%3d&risl=&pid=ImgRaw&r=0',
    location:'https://ditu.amap.com/search?query=%E5%B1%B1%E8%A5%BF%E5%8D%9A%E7%89%A9%E9%99%A2&city=140100&geoobj=112.453718%7C37.742286%7C112.477713%7C37.75278&zoom=16.36'
  },
  {
    id: 3,
    name: '太原古县城景区',
    description: '晋阳古城文脉的延续',
    rating: 3.9,
    price: 60,
    openingHours: '10:00-21:00',
    image:' https://ts1.tc.mm.bing.net/th/id/R-C.50906cca33eab5bd00f17e80af07ae8f?rik=zGqc4sqvxFYc2g&riu=http%3a%2f%2fwww.tynews.com.cn%2fpic%2f003%2f001%2f410%2f00300141005_e67cbdef.jpg&ehk=IefQxHQ%2fgPN2MsbN84FPndB5j9lXmX%2fuiZiCdlFoYks%3d&risl=&pid=ImgRaw&r=0',
    location:'https://ditu.amap.com/search?query=%E5%A4%AA%E5%8E%9F%E5%8F%A4%E5%8E%BF%E5%9F%8E%E6%99%AF%E5%8C%BA&city=140100&geoobj=112.525606%7C37.863131%7C112.536469%7C37.867874&zoom=17.5'
  },
  {
    id: 4,
    name: '太原植物园',
    description: '山西省第一批全国科普教育基地',
    rating: 4.9,
    price: 30,
    openingHours: '09:00-20:00',
    image:'https://q8.itc.cn/images01/20240414/3e9d41fcc96e44b2aaf19eb9e409e705.jpeg',
    location:'https://ditu.amap.com/search?query=%E5%A4%AA%E5%8E%9F%E6%A4%8D%E7%89%A9%E5%9B%AD&city=140100&geoobj=112.556118%7C37.791799%7C112.571482%7C37.798514&zoom=17'
  },
  {
    id: 5,
    name: '柳巷',
    description: '太原历史悠久的繁华商业街',
    rating: 4.5,
    price: 10,
    openingHours: '全年全天开放',
    image:' https://ts1.tc.mm.bing.net/th/id/R-C.519cb72073d0001f88e4772c587afe63?rik=y2PaqOdACSBPTg&riu=http%3a%2f%2fp2.itc.cn%2fimages01%2f20201023%2f25247f4d0fa7499ca8b65393a0a18fee.jpeg&ehk=YbJCUYzm8GYxuO1VoXlLRU3MgelFp%2fWs6Y0qOsV1wsY%3d&risl=&pid=ImgRaw&r=0',
    location:'https://ditu.amap.com/search?query=%E6%9F%B3%E5%B7%B7&city=140100&geoobj=112.474774%7C37.722906%7C112.496957%7C37.73261&zoom=16.47'
  },
  {
    id: 6,
    name: '太原方特东方神画',
    description: '大型文化高科技主题乐园',
    rating: 4.7,
    price: 188,
    openingHours: '10:00-17:30',
    image:' https://ts1.tc.mm.bing.net/th/id/R-C.0c0727b4f1548da28d88c038c696c392?rik=RkK4xCmD819L7g&riu=http%3a%2f%2ftr-osdcp.qunarzz.com%2ftr-osd-tr-manager%2fimg%2f0c0727b4f1548da28d88c038c696c392.jpg&ehk=JWTZrgoVGZCNpvr5LKkhmpIV4ef0wNLcCIZXqOakR9Q%3d&risl=&pid=ImgRaw&r=0',
    location:'https://ditu.amap.com/search?query=%E5%A4%AA%E5%8E%9F%E6%96%B9%E7%89%B9%E4%B8%9C%E6%96%B9%E7%A5%9E%E7%94%BB&city=140100&geoobj=112.562381%7C37.868204%7C112.573244%7C37.872947&zoom=17.5'
  },
  {
    id: 7,
    name: '天龙山石窟',
    description: '以小而精著称的千年石窟',
    rating: 4.7,
    price: 24,
    openingHours: '09:00-16:30',
    image:' https://ts1.tc.mm.bing.net/th/id/R-C.17c891f39a7541215a012761686465a5?rik=Q8dVilHuEpHXTw&riu=http%3a%2f%2fimg.xinmin.cn%2fxmwb%2f2020%2f10%2fNEM1_20201013_C0325754659_A2482137.jpg&ehk=ulGz%2bSEE9ErPoBk3bhM%2bYvUfi1IDY4DRlZAfSyz4UNg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    location:'https://ditu.amap.com/search?query=%E5%A4%A9%E9%BE%99%E5%B1%B1%E7%9F%B3%E7%AA%9F&city=140100&geoobj=112.642594%7C38.041981%7C112.660679%7C38.049856&zoom=16.76'
  },
  {
    id: 8,
    name: '曦岭滑雪场',
    description: '滑雪圣地',
    rating: 4.4,
    price: 88,
    openingHours: '日场 08:30-17:00,夜场 17:30-21:30',
    image:' https://xiling.cn/upload/img/201801/9997b7a3-d190-48ec-99f9-27b4c4f70a5d.png',
    location:'https://ditu.amap.com/search?query=%E6%9B%A6%E5%B2%AD%E6%BB%91%E9%9B%AA%E5%9C%BA&city=140100&geoobj=112.3803%7C37.735493%7C112.391163%7C37.740245&zoom=17.5'
  },
  {
    id: 9,
    name: '榆次老城',
    description: '古城中欣赏精彩的民俗表演',
    rating: 4.4,
    price: 75,
    openingHours: '8:00-18:00',
    image:'https://so1.360tres.com/t01de75225b22efcd16.jpg',
    location:'https://ditu.amap.com/search?query=%E6%A6%86%E6%AC%A1%E8%80%81%E5%9F%8E&city=140100&geoobj=112.619712%7C37.925369%7C112.633086%7C37.931204&zoom=17.2'
  }

  // 可添加更多数据...
])

const searchQuery = ref('')
const sortBy = ref('rating')

// 计算属性处理过滤和排序
const sortedAttractions = computed(() => {
  return [...attractions.value]
      .filter(attraction => {
        const query = searchQuery.value.toLowerCase()
        return (
            attraction.name.toLowerCase().includes(query) ||
            attraction.description.toLowerCase().includes(query)
        )
      })
      .sort((a, b) => {
        switch (sortBy.value) {
          case 'rating':
            return b.rating - a.rating
          case 'price':
            return a.price - b.price
          case 'name':
            return a.name.localeCompare(b.name)
          default:
            return 0
        }
      })
})
// 导航方法
const navigateTo = (attraction) => {
  if (attraction.location) {
    window.open(attraction.location, '_blank');
  } else {
    alert('该景点暂无导航信息');
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.controls {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.search-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #42b983;
  border-radius: 8px;
  font-size: 16px;
}

.sort-select {
  padding: 12px;
  border: 2px solid #42b983;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.attraction-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.attraction-card:hover {
  transform: translateY(-5px);
}

.attraction-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.attraction-info {
  padding: 20px;
}

.attraction-info h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.description {
  color: #666;
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
}

.rating {
  color: #ff9800;
  font-weight: bold;
}

.price {
  color: #42b983;
  font-weight: bold;
}

.hours {
  color: #666;
}
.nav-button {
  background-color: #42b983;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}
.nav-button:hover {
  background-color: #3aa876;
}

</style>